<template>
  <div class="zuida">
    <back></back>
    <!-- 文章详情 -->
    <div class="wenzhang">
      <div class="tou">
        <el-image 
    style="width: 50px; height: 50px"
    :src="wen.tou" 
    :preview-src-list="[wen.tou]">
  </el-image>
          <!-- <img :src="wen.tou" alt=""> -->
          <div class="name">{{wen.user}}<br>{{wen.date}}</div>
        </div>
      <div class="title">{{wen.title}} </div>
       {{wen.content}} <br/>
       <div class="img">
        <div v-for="(item,index) in wen.img" :key="index" class="imgzong">
        <!-- <img :src="item" alt=""> -->
        <el-image 
    :src="item" 
    :preview-src-list="wen.img" class="getu">
  </el-image>
        </div>
      </div>
    </div>
    <div class="pinglun">
      <div class="ge" v-for="(item,index) in pinglun" :key='index'>
        <!-- {{item.name}}<br> -->
        <div class="tou">
          <el-image 
    style="width: 50px; height: 50px"
    :src="item.img" 
    :preview-src-list="[item.img]">
  </el-image>
          <!-- <img :src="wen.tou" alt=""> -->
          <div class="name">{{item.name}}<br>{{item.date}}</div>
        </div>
        <div class="xia">
          <div class="zuo">{{item.pinglun}}</div>
        <div class="you" v-if="idd===item.idd"><i class="el-icon-delete" @click="del(item.a)"></i></div>
        </div>
        
        
        
      </div>
    </div>
    <div class="fayan" v-if="user">留言板
      <textarea name="" id="" cols="24" rows="10" v-model="text" style="resize:none" ></textarea>
      <!-- <el-input
  placeholder="请输入内容"
  v-model="text"
  clearable>
</el-input> -->
      <button @click="tijiao" :plain='true'>发布</button>
    </div>
  </div>
</template>
<script>
import back from './zujian/back.vue'
// import axios from 'axios'
export default {
  data(){
    return{
      index:'2',
      pinglun:[],
      wen:'',
      id:'',
      tou:'',
      text:'',
      name:'',
      idd:'',
      user:''
    }
  },
  methods:{
    del(value){
      this.axios.get("/delping/"+value).then((res)=>{
        this.$router.go(0)
      })
    },
    tijiao(){
      if(this.text!==''){
        const riqi=new Date()
      this.date=riqi.getUTCMonth()+1+'/'+riqi.getUTCDate()+' '+riqi.getHours()+":"+riqi.getMinutes();
      this.axios.post('/pinglun/'+this.id,{
        id:this.id,
        name:this.name,
        pinglun:this.text,
        date:this.date,
        img:this.tou,
        idd:this.idd
     }).then((res)=>{
        // console.log(res);
        // console.log(888);
         this.axios.get("/pinglun/"+this.id).then((res)=>{
        // console.log("评论添加成功!");
        this.$router.go(0)
      })
      })
      }
      else{
        this.$message({
          message:'评论内容不可为空!',
          type:'warning'
        });
      }
     
      // this.
      // this.$router.push('/wenzhang/'+this.id)
      
      // location.reload()
    }
  },
  created(){
    
    this.axios.get('/xiangxi/'+this.$route.params.id).then((res)=>{
      this.pinglun=res.data[0]
      this.wen=res.data[1][0]
      this.wen.img=eval(this.wen.img)
      this.id=this.$route.params.id
      // this.tou=this.wen.tou
      console.log(res);
    })
    var user=JSON.parse(sessionStorage.getItem("user"))
    this.user=user
    if(user){
      this.name=user.use
    this.idd=user.id
    this.axios.get('/wode/'+this.idd).then((res)=>{
      // console.log(res);
      this.tou=res.data[0].tou
    })
    }
    
    
  },
  mounted(){
    this.$store.commit('indexbian',this.index)
    
    console.log(this.$route.params.id);
  },
  components:{
    back
  }
}
</script>
<style lang="less" scoped>
  .zuida{
    padding: 20px;
    width: 60%;
    background-color: #5ac780;
    margin: 0 auto;
    border-radius: 10px;
    padding-bottom: 100px;
  }
  .wenzhang{
    width: 90%;
    margin: 0 auto;
    // height: 300px;
    background-color: #83da9a;
    box-shadow: 1px 1px 10px #3a692b;
    border-radius: 20px;
    padding: 10px;
  }
  .pinglun{
    width: 80%;
    margin: 0 auto;
    .ge{
      margin-top: 20px;
      padding: 20px;
      width: 100%;
      // height: 50px;
      background-color: #75d66f;
      border-radius: 20px;
      box-shadow: 2px 2px 15px #96cb62;
    }
  }
 .img{
      width: 100%;
      display: flex;
      margin-top: 10px;
      // background-color: blueviolet;
      flex-wrap:wrap;
      // justify-content:space-around;
      // margin-right: ;
      .imgzong{
        margin-left: 4px;
        margin-top: 4px;
        display: flex;
        justify-content:center;
        width: 32%;
        border-radius: 20px;
        // overflow: hidden;
        height: 280px;
        overflow: hidden;
        
      }
      
    }
 .tou{
      display: flex;
      color: #7b8084;
      margin-bottom: 10px;
      /deep/ .el-image{
        border-radius: 25px;
      }
      img{
        // margin-top: 20px;
        width: 50px;
        // height: 50px;
        border-radius: 25px;
        overflow: hidden;
      }
    .name{
      margin-left: 20px;
      margin-top: 10px;
    }
  }
  .title{
    color: #000000;
    font-size: 22px;
  }
   /deep/ .getu{
          width: 100%;
          // height: 100%;
          // 
          
          img{
            width: 100%;
            // height: 50%;
            // display: block;
            object-fit: cover;
          }
        }
  .fayan{
    // position: relative;
    position:fixed;
    // top: 20px;
    right: 50px;
    bottom: 200px;
    padding: 20px;
    border-radius: 10px;
    margin: 0 auto;
    width: 240px;
    // height: 100px;
    font-size: 24px;
    background-color: #84db80;
    text-align: center;
    textarea{
      margin: 0 auto;
      display: block;
      background: #cce5d4;
      padding: 10px;
      border-radius: 4px;
    }
    button{
      // line-height: 20px;
      font-size: 20px;
    }
  }
  .xia{
    display: flex;
     justify-content:space-between;
  }
</style>